<!--  -->
<template>
  <div>
    <a-card :bordered="false" class="search-wrapper">
      <div class="search-form-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item>
                <DateTimeRange
                  v-model="filter._dateRange"
                  :startDate.sync="filter.beginTime"
                  :endDate.sync="filter.endTime"
                  :placeholder="['下载开始时间', '下载结束时间']"
                />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="handle">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => (filter = {})">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card>
      <a-table
        :loading="tableLoading"
        :columns="columns"
        :pagination="pagination"
        @change="(e) => handle(e)"
        :data-source="tableData"
        :scroll="{ y: tableHeight }"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="() => download(record, text)">下载到本地</a>
        </span>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getFilePage, downloadFile } from '@/api/set'
const columns = [
  {
    title: '下载时间',
    dataIndex: 'createTime'
    // width: 220
  },
  {
    title: '下载任务',
    dataIndex: 'fileName'
    // width: 220
  },
  // {
  //   title: '下载状态',
  //   dataIndex: 'stateDesc',
  //   width: 220
  // },
  {
    title: '操作',
    // fixed: 'right',
    scopedSlots: { customRender: 'action' },
    dataIndex: 'action'
    // width: 120
  }
]
import { DateTimeRange } from '@/components'
import FileSaver from 'file-saver'
export default {
  components: {
    DateTimeRange
  },
  data() {
    return {
      visible: false,
      pagination: {
        current: 1,
        'show-size-changer': true,
        total: 0
      },
      tableData: [],
      tableLoading: false,
      advanced: false,
      queryParam: {
        pageNum: 1,
        pageSize: 10
      },
      tabbarHeight: 420,
      queryParamKey: 'spu_name',
      columns,
      filter: {
        _dateRange: [],
        beginTime: '',
        endTime: ''
      }
    }
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
    tableHeight() {
      return document.body.clientHeight - 220
    }
  },
  activated() {
    this.loadData()
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.tableLoading = true
      getFilePage({ ...this.queryParam })
        .then((res) => {
          this.tableLoading = false
          console.log(res)
          this.tableData = res.rows
          this.pagination.total = res.total
        })
        .catch(() => {})
    },
    handle(v) {
      console.log('daozhegel')

      if (v && v.current) {
        if (this.queryParam.pageSize == v.pageSize) {
          this.pagination.current = v.current
          this.queryParam.pageNum = v.current
        } else {
          this.queryParam.pageSize = v.pageSize
          this.queryParam.pageNum = 1
          this.pagination.current = 1
        }
      } else {
        this.queryParam.pageNum = 1
        this.pagination.current = 1
      }

      this.loadData()
    },
    download(info) {
      this.downloadByForm2('admin/file/download', { id: info.id })
      // downloadFile({
      //   id: info.id
      // }).then((res) => {
      //   console.log(res)
      //   this.downloadFile2(res, res.fileName)
      //   // FileSaver.saveAs(res)
      // })
    },
    downloadFile2(res, filename) {
      // res 调用接口后返回的数据
      // filename自定义文件名
      const blob = new Blob([res.data]) // 将返回的数据通过Blob的构造方法，创建Blob对象
      if ('msSaveOrOpenBlob' in navigator) {
        window.navigator.msSaveOrOpenBlob(blob, filename) // 针对浏览器
      } else {
        const elink = document.createElement('a') // 创建a标签
        elink.download = filename
        elink.style.display = 'none'
        // 创建一个指向blob的url，这里就是点击可以下载文件的根结
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 移除链接
        document.body.removeChild(elink) // 移除a标签
      }
    },
    downloadByForm2(apiUrl, params = {}, method) {
      const token = storage.get(ACCESS_TOKEN)
      let url =
        apiUrl.indexOf('http') == -1 ? `${process.env.VUE_APP_API_BASE_URL}/${apiUrl}` : apiUrl
      var form = document.createElement('form')
      form.style.display = 'none'
      form.action = url
      form.method = method || 'GET'
      document.body.appendChild(form)
      params.token = token
      for (var key in params) {
        var input = document.createElement('input')
        input.type = 'hidden'
        input.name = key
        input.value = params[key]
        form.appendChild(input)
      }
      form.submit()
    }
  }
}
</script>

<style lang="less" scoped>
.empty {
  width: calc(100% + 50px);
  margin-left: -25px;
  height: 12px;
  background: #f7f8fa;
}
.search-box {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 47px;
  margin-bottom: 19px;
  .type-list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    .type-item {
      height: 45px;
      line-height: 45px;
      border-bottom: 2px solid #fff;
      padding: 0 20px;
      font-size: 14px;
      cursor: pointer;
    }
    .type-item.active {
      border-bottom: 2px solid #4393f2;
      font-size: 16px;
      font-weight: 500;
      color: #4393f2;
    }
  }
}
.search-form-wrapper {
  background: #f3f4f7;
  padding: 10px 20px 20px !important;
  margin-bottom: 20px;
  padding-bottom: 20px;
  /deep/ .ant-col {
    height: 45px;
  }
  /deep/ .ant-form-item {
    margin: 12px 0;
  }
  /deep/ .ant-btn {
    width: 68px;
    height: 32px;
    margin-top: 12px;
  }
}
</style>
